<!DOCTYPE html>
<html>
	<head>
		<title>转换反色使用的页面</title>
		<meta charset='UTF-8'/>
		<meta name='Expires' content='0'/>
		<meta name='Pragma' content='no-cache'/>
		<meta name='Cache' content='no-cache'/>
		<meta name='Cache-Control' content='no-cache,no-store,must-revalidate,max-age=1'/>
		<meta name='robots' content='nofollow,noindex'/>
		<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
		<meta name='renderer' content='webkit'>
		<meta name='viewport'
			  content='width=device-width,initial-scale=1,shrink-to-fit=no,maximum-scale=1,minimum-scale=1,user-scalable=no'>
		<meta name='theme-color' content='#252932'/>
		<!--放个图标↓-->
		<link href='/favicon-32.webp' rel='icon'>
		<style>
			html{
				box-sizing :border-box;
				margin     :0;
				padding    :0;
				border     :0;
				height     :100%;
				width      :100%;
				overflow   :hidden;
			}
			body{
				box-sizing :border-box;
				margin     :0;
				padding    :0;
				border     :0;
				height     :100%;
				width      :100%;
			}
			.vue-container{
				box-sizing :border-box;
				padding    :0;
				margin     :0;
				border     :0;
				height     :100%;
				width      :100%;
			}
			/*用于阻止事件*/
			.disableEvent{
				pointer-events :none;
			}
			.box{
				padding         :0;
				margin          :0;
				border          :0;
				height          :100%;
				width           :100%;
				display         :flex;
				flex-direction  :row;
				flex-wrap       :nowrap;
				align-content   :center;
				justify-content :center;
				align-items     :center;
			}
			.waitForBoom{
				background-color :#165BAA;
				width            :66px;
				height           :66px;
				border-radius    :50%;
				text-align       :center;
			}
			.animate1{
				animation :rotate1 2s both infinite;
			}
			@keyframes rotate1{
				0%{
					transform :scale(0.5);
				}
				50%{
					transform :scale(1);
				}
				100%{
					transform :scale(0.5);
				}
			}
			.animate2{
				animation :rotate2 2s both infinite;
			}
			@keyframes rotate2{
				0%{
					transform :scale(1);
				}
				50%{
					transform :scale(0.5);
				}
				100%{
					transform :scale(1);
				}
			}
		</style>
		<script>
			window.onload = () => {
				const oldColor = document.getElementById('colorHex');
				oldColor.addEventListener('change', colorReverse);
			};
			const clearAndFocus = () => {
				document.getElementById('colorHex').value = '';
				document.getElementById('colorHex').focus();
				document.getElementById('colorHex').select();
			};
			const colorReverse = () => {
				const oldColorValue = document.getElementById('colorHex').value;
				const hexOldColorValue = '0x' + oldColorValue.replace(/#/g, '');
				let str = '000000' + (0xFFFFFF - hexOldColorValue).toString(16);
				const result = str.substring(str.length - 6, str.length).toUpperCase();
				document.getElementById('invertedColorHex').value = result;
				copyToClipboard(result);
			};
			const copyToClipboard = (text) => {
				const input = document.createElement('textarea');
				input.value = text;
				document.body.appendChild(input);
				input.select();
				document.execCommand('copy');
				document.body.removeChild(input);
			};
		</script>
	</head>
	<body>
		<noscript>
			<strong>你的浏览器似乎禁止了JavaScript的内容,启用它以查看该网站的内容</strong>
		</noscript>
		<button onclick='clearAndFocus()'>清空并聚焦</button>
		<br/>
		<label for='colorHex'>十六进制色:</label>
		<br/>
		<input id='colorHex' name='colorHex'>
		<br/>
		<label for='invertedColorHex'>反色后的十六进制色:</label>
		<br/>
		<input id='invertedColorHex' name='invertedColorHex'>
		<br/>
		<button onclick='colorReverse()'>转换</button>
	</body>
</html>